<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/jsb.css"/>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>记事本</h1>
			<input v-model="inputvalue" @keyup.enter="add" placeholder="请输入任务"/>
			<ul>
				<li v-for="(item,index) in list">
					<span>{{index+1}}.</span>
					<lable>{{item}}</lable>
					<button type="button" @click="remove(index)">x</button>
				</li>
			</ul>
			<span v-if="list.length!=0"><strong>{{list.length}}</strong></span>
			<button type="button" @click="clear()" v-show="list.length!=0">全部清除</button>
		</div>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					list:["写代码","吃饭饭","睡觉觉"],
					inputvalue:"哈哈哈"
				},
				methods:{
					add:function(){
						this.list.push(this.inputvalue)
					},
					remove:function(index){
						this.list.splice(index,1)
					},
					clear:function(){
						this.list=[]
					}
				}
			})
		</script>
	</body>
</html>
